<template>
  <div id="roleAply">
    <a-form :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item field="className" label="班级名称">
        <a-input
          v-model="className"
          placeholder="please enter className( 例如：软件1班 )"
        />
      </a-form-item>

      <a-form-item style="padding-top: 25px">
        <a-button html-type="classAply">Apply</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
        
        <script>
import { reactive } from "vue";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();

export default {
  data() {
    return {
      userName: this.$store.state.user.loginUser.userName,
      className: "",
    };
  },
  methods: {
    handleSubmit() {
      axios
        .post("/supClassCreate", {
          supClassName: this.className,
          supName: this.userName,
        })
        .then((response) => {
          if (response.data) {
            alert("班级创建申请提交成功！");
          } else {
            alert("提交失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
    
    <style>
#roleAply {
  padding-top: 100px;
  padding-left: 400px;
}
#roleAply .select {
  padding-left: 0px;
}
</style>